import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    plugins: [createPersistedState()],

    todos:JSON.parse(localStorage.getItem("vuex")||"[]"),
    activeTab:"all",
  },
  mutations: {
    footerClickAll:function(state){
      // 筛选出未完成 => todos
      let activeTodos = state.todos.filter((v) => {
        // v.status => false
        return !v.status; // false => !false => true
      });
      state.todos = activeTodos;
    },
    changeActiveTab: function (state, { payload }) {
      state.activeTab = payload.activeTab;
    },
    deletTodo: function (state, { payload }) {
      state.todos.splice(payload.index, 1);
    },
    addTodo: function (state, { payload }) {
      state.todos.push(payload);
    },
    // 全选逻辑
    allCheck: function (state) {
      state.todos.map((v) => {
        v.status = true;
      });
      console.log(state.todos);
    },
  },
  actions: {
  },
  modules: {
  },
  getters:{
    activeTab:function(state){
      return state.activeTab;
    },
    remaining:function(state){
      let remainingTodo=state.todos.filter(v=>{
            if(!v.status){
                  return true;
            }
      })
      return remainingTodo.length;
    },
    allChecked: function (state) {
      let checked = true;
      // 只要todo 里面有一个 status false => allChecked = false
      if(state.todos.length){
            state.todos.map((v) => {
            if (!v.status) checked = false;
            // console.log(state.todos.length)
            });
            
            return checked;
      }else{
            return checked=false
      }
      },
    filterTodos:function (state){
      if(state.activeTab==="all"){
       //      console.log(state.todos)
       return state.todos;
     }else if(state.activeTab === "active"){
           return state.todos.filter(v=>{
       // v.status => false
       return !v.status;
       })
       }else if(state.activeTab === "completed"){
       return state.todos.filter(v=>{
       // v.status => true
       return v.status;
       })
       }else{
             return state.todos
       }
      
},
  }
})
